<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>店铺审核管理</title>
    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>

    <style>
        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
        }
        .image-slot i {
            font-size: 20px;
        }
    </style>

</head>
<body>
<!-- Vue应用根元素 -->
<div id="app" class="app1">
    <!-- 搜索区域 - 使用Element UI栅格系统布局 -->
    <el-row>
        <!-- 店铺ID搜索框 -->
        <el-col :span="6">
            <el-input size="mini"
                      v-model="searchForm.shopId"
                      placeholder="请输入店铺ID"
                      size="small">
            </el-input>
        </el-col>

        <!-- 店铺名称搜索框 -->
        <el-col :span="6">
            <el-input size="mini"
                      v-model="searchForm.shopName"
                      placeholder="请输入店铺名称"
                      size="small">
            </el-input>
        </el-col>

        <!-- 联系电话搜索框 -->
        <el-col :span="6">
            <el-input size="mini"
                      v-model="searchForm.contactPhone"
                      placeholder="请输入联系电话"
                      size="small">
            </el-input>
        </el-col>
        <el-col :span="6">
            <el-select
                    v-model="searchForm.auditStatus"
                    placeholder="请选择审核状态"
                    size="small">
                <el-option label="全部" value=""></el-option>
                <el-option label="待审核" value="0"></el-option>
                <el-option label="已通过" value="1"></el-option>
                <el-option label="已拒绝" value="2"></el-option>
            </el-select>
        </el-col>
        <!-- 搜索按钮 -->
        <el-col :span="6">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-search"
                       @click="search"
                       size="small">
                搜索
            </el-button>
        </el-col>
    </el-row>

    <!-- 店铺数据表格 -->
    <el-table :data="tableData" style="width: 100%">
        <!-- 店铺ID列 -->
        <el-table-column prop="shopId" label="店铺ID" width="80"></el-table-column>
        <!-- 店铺名称列 -->
        <el-table-column prop="shopName" label="店铺名称" width="120"></el-table-column>

        <!-- 联系电话列 -->
        <el-table-column prop="contactPhone" label="联系电话" width="120"></el-table-column>

        <!-- 店铺地址列 -->
        <el-table-column prop="shopAddress" label="店铺地址" width="150"></el-table-column>

        <!-- 经营类型列 -->
        <el-table-column prop="businessType" label="经营类型" width="120"></el-table-column>

        <!-- 状态列 -->
        <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                    {{ scope.row.status === '0' ? '正常' : '停用' }}
                </el-tag>
            </template>
        </el-table-column>

        <!-- 审核状态列 -->
        <el-table-column prop="auditStatus" label="审核状态" width="100">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.auditStatus === '0'" type="info">待审核</el-tag>
                <el-tag v-else-if="scope.row.auditStatus === '1'" type="success">通过</el-tag>
                <el-tag v-else type="danger">拒绝</el-tag>
            </template>
        </el-table-column>
        <!-- 审核人列 -->
        <el-table-column prop="auditBy" label="审核人" width="120">
            <template slot-scope="scope">
                {{ scope.row.auditBy || '未审核' }} <!-- 未审核时显示“未审核” -->
            </template>
        </el-table-column>
        <!-- 审核时间列 -->
        <el-table-column prop="auditTime" label="审核时间" width="180">
            <template slot-scope="scope">
                <!-- 时间格式处理：将ISO格式（含T）转为正常时间字符串 -->
                {{ scope.row.auditTime ? scope.row.auditTime.replace('T', ' ').substring(0, 19) : '未审核' }}
            </template>
        </el-table-column>
        <!-- 创建时间列 -->
        <el-table-column prop="createTime" label="创建时间" width="180">
            <template slot-scope="scope">
                {{ scope.row.createTime ? scope.row.createTime.replace('T', ' ').substring(0, 19) : '' }}
            </template>
        </el-table-column>
        <!-- 营业执照列 -->
        <el-table-column label="营业执照" width="120">
            <template slot-scope="scope">
                <div v-if="scope.row.businessLicence">
                    <el-image
                            :src="scope.row.businessLicence"
                            :preview-src-list="[scope.row.businessLicence]" style="width: 80px; height: 80px;"
                            fit="cover"
                            lazy>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div v-else>
                    <span>无</span>
                </div>
            </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
                <!-- 编辑按钮 -->
                <el-button size="mini" @click="handleView(scope.$index, scope.row)">
                    查看
                </el-button>

                <!-- 审核按钮 -->
                <el-button size="mini" type="warning" @click="handleAudit(scope.$index, scope.row)">
                    审核
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3,5,10,15,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!-- 查看店铺对话框 -->
    <el-dialog :title="title" :visible.sync="viewDialogVisible" width="600px">
        <!-- 表单 -->
        <el-form :model="form"  ref="form" label-width="120px" class="readonly-form">
            <!-- 店铺名称输入框 -->
            <el-form-item label="店铺名称" prop="shopName">
                <el-input v-model="form.shopName" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 店铺LOGO输入框 -->
            <el-form-item label="店铺LOGO" prop="shopLogo">
                <el-input v-model="form.shopLogo" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 联系电话输入框 -->
            <el-form-item label="联系电话" prop="contactPhone">
                <el-input v-model="form.contactPhone" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 店铺地址输入框 -->
            <el-form-item label="店铺地址" prop="shopAddress">
                <el-input v-model="form.shopAddress" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 经营类型输入框 -->
            <el-form-item label="经营类型" prop="businessType">
                <el-input v-model="form.businessType" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 截单时间输入框 -->
            <el-form-item label="截单时间" prop="cutOffTime">
                <el-input v-model="form.cutOffTime" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 结算周期输入框 -->
            <el-form-item label="结算周期(天)" prop="settlementCycle">
                <el-input v-model="form.settlementCycle" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 状态选择框 -->
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio label="0">正常</el-radio>
                    <el-radio label="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 备注输入框 -->
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" autocomplete="off" :rows="3"></el-input>
            </el-form-item>

            <el-form-item label="营业执照" prop="businessLicence">
                <div v-if="form.businessLicence">
                    <img :src="form.businessLicence" style="width: 100px; height: 100px; margin-top: 10px;" />
                </div>
                <div v-else>
                    <span>无照片</span>
                </div>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!-- 店铺审核对话框 -->
    <el-dialog title="店铺审核" :visible.sync="auditDialogVisible" width="500px">
        <el-form :model="auditForm" ref="auditForm" label-width="80px">
            <el-form-item label="店铺名称">
                <el-input v-model="auditForm.shopName" readonly></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-select v-model="auditForm.auditStatus" placeholder="请选择审核状态" style="width: 100%">
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="拒绝" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核备注">
                <el-input type="textarea" v-model="auditForm.auditRemark" :rows="3"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="auditDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAuditForm('auditForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],              // 表格数据
                currentPage: 1,             // 当前页码
                pageSize: 5,                // 每页显示条数
                total: 0,                   // 总条数
                searchForm: {               // 搜索条件
                    shopId: '',
                    shopName: '',
                    contactPhone: '',
                    auditStatus: '' // 新增：审核状态筛选（0=待审核，1=通过，2=拒绝）
                },
                title: '查看店铺',           // 对话框标题
                auditDialogVisible: false,  // 审核对话框是否可见
                viewDialogVisible: false,   // 查看对话框是否可见
                form: {                     // 店铺表单数据
                    shopId: '',
                    purchaserId: '',
                    shopName: '',
                    shopLogo: '',
                    contactPhone: '',
                    shopAddress: '',
                    businessType: '',
                    cutOffTime: '',
                    settlementCycle: '',
                    status: '0',
                    remark: '',
                    businessLicence: ''       // 添加营业执照字段
                },
                auditForm: {                // 审核表单数据
                    shopId: '',
                    shopName: '',
                    auditStatus: '',
                    auditRemark: ''
                },
                businessLicenceFileList: []// 营业执照文件列表
            }
        },
        created() {
            // 页面加载时加载数据
            this.loadData();
        },
        methods: {
            // 加载店铺数据
            loadData() {
                let _this = this;
                // 发送POST请求获取分页数据
                axios.post('/vegetablemarketexpress/shop/selectShopList', {
                    "pageNo": this.currentPage,
                    "pageSize": this.pageSize,
                    "data": this.searchForm
                }).then(function (response) {
                    if (response.data.code == 200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total;
                      /*  // 为每个店铺获取商家名称
                        _this.tableData.forEach(shop => {
                            _this.loadMerchantName(shop);
                        });*/
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error('数据加载失败');
                });
            },
           /* // 加载商家名称
            loadMerchantName(shop) {
                // 如果后端没有返回商家名称，根据create_by字段查询
                if (!shop.createByNickName && shop.createBy) {
                    axios.post('/vegetablemarketexpress/user/getUserNickNameById', {
                        userId: shop.createBy
                    }).then(response => {
                        if (response.data.code == 200) {
                            // 使用Vue.set确保响应式更新
                            this.$set(shop, 'createByNickName', response.data.data);
                        } else {
                            this.$set(shop, 'createByNickName', '未知商家');
                        }
                    }).catch(error => {
                        console.error('获取商家名称失败:', error);
                        this.$set(shop, 'createByNickName', '获取失败');
                    });
                }
            },*/
            // 每页条数改变时触发
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },

            // 当前页改变时触发
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },

            // 搜索功能
            search() {
                this.currentPage = 1;
                this.loadData();
            },

            // 处理店铺审核：打开审核弹窗时自动填充审核人
            handleAudit(index, row) {
                this.auditDialogVisible = true;
                // 仅初始化客户ID、客户名称，审核人由后端自动获取
                this.auditForm = {
                    shopId: row.shopId,// 商家ID（必传）
                    shopName: row.shopName,// 商家名称（仅展示用，非必传）
                    auditStatus: '',// 前端选择的审核结果（1通过/2拒绝）
                    auditRemark: '',// 前端输入的审核备注
                };
            },
            // 提交审核表单
            submitAuditForm(formName) {
                let _this = this;
                // 确保审核人字段不缺失
                // 1. 验证审核状态是否选择
                if (!this.auditForm.auditStatus) {
                    this.$message.error('请选择审核状态（通过/拒绝）');
                    return;
                }
                let submitForm = {
                    shopId: this.auditForm.shopId,
                    auditStatus: this.auditForm.auditStatus,
                    auditRemark: this.auditForm.auditRemark
                };

                axios.post('/vegetablemarketexpress/shop/auditShop', submitForm)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '审核成功',
                                type: 'success'
                            });
                            _this.loadData();
                            _this.auditDialogVisible = false;
                        } else {
                            _this.$message.error('审核失败: ' + response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        _this.$message.error('审核异常');
                    });
            },
            /**
             * 查看店铺信息
             * @param index
             * @param row
             */
            handleView(index, row) {
                this.viewDialogVisible = true;
                this.title = "查看店铺信息";
                // 深拷贝避免直接引用
                this.form = JSON.parse(JSON.stringify(row));
            },

            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

        }
    });
</script>


</body>
</html>
